<template>
  <div>
    <div class="nav">
      <router-link to="/waimai" tag="img" src="../../static/未标题-1.png">
      </router-link>

      <span></span>
      <img src="../../static/未标题-2.png" alt="">
    </div>
    <div class="nav1">
      <div class="left">
        <img src="https://fuss10.elemecdn.com/0/1e/f7178b563a8e06db9f038250f6d13png.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
      </div>
      <div class="right">
        <h2>全家便利店（霞公府店）</h2>
        <p>
          <span>
            蜂鸟专送/
          </span>
          <span>
            29分钟送达/
          </span>
          <span>
            配送费¥6
          </span>
        </p>
        <p>
          <span class="gong">公告：</span>
          <span>欢迎光临全家。喜欢全家可点击右上角【收藏商家】 如果您有全家的集享卡，您在饿了么消费，可以给您积分的。支付前，请在“订单备注”，填写手机号。 热食默认加热，不需加热请备注。您在购物中有任何问题，请拨打商家电话，第一时间为您解决。

          </span>
        </p>
      </div>
    </div>
    <div class="bom">
      <p class="left">
        <span>首</span>
        新用户下单立减15元(不与其它活动同享)
      </p>
      <p class="right">
        2个活动
        <span>♂</span>
      </p>
    </div>
    <!-- <div class="sw"> -->
    <ul class="ul">
      <li @click="click(i)" v-for="(v,i) in list" :key="i">{{v}}</li>
    </ul>
    <swiper :options="swiperOption" ref="mySwiper" class="wp">
      <swiper-slide class="swp1">
        <div class="xia11">
          <ul>
            <li v-for="(v,i) in list1" :key="i">{{v}}
            </li>
          </ul>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="v in 10" :key="v">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    超实惠套餐
                  </h2>
                  <p>3荤+2素+米饭 注：图片仅供参考，以当天实物为准</p>
                  <p>
                    <span>月售478份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>

        </div>
      </swiper-slide>
      <swiper-slide class="pingjia">
        <div class="pj">
          <div class="pj1">
            <div class="left">
              <p class="da">4.7</p>
              <p class="da1">综合评价</p>
              <p class="da2">高于周边商家81.1%</p>
            </div>
            <div class="right">
              <p class="r1">服务态度
                <span>⭐⭐⭐⭐⭐5.0</span>
              </p>
              <p class="r1">菜品评价
                <span>⭐⭐⭐⭐⭐4.5</span>
              </p>
              <p class="r1">送达时间
                <span class="shi">
                  32分钟
                </span>
              </p>
            </div>
          </div>

        </div>
        <div class="hao">
        </div>
        <div class="xia">
          <div class="xia1">
            <p>全部(43)</p>
            <p>满意(42)</p>
            <p>不满意(1)</p>
            <p>有图(1)</p>
          </div>
        </div>
        <div class="max">
          <div class="ren" v-for="v in 10">
            <div class="tou">
              <p class="iconfont icon-wode"></p>
            </div>
            <div class="zi">
              <ul>
                <li>匿名用户
                  <span>2017-10-06</span>
                </li>
                <li>⭐⭐⭐⭐⭐</li>
                <li><img src="https://fuss10.elemecdn.com/0/e4/f2c2bce9487b1503d7f1f514461fejpeg.jpeg?imageMogr/format/webp/thumbnail/!142x142r/gravity/Center/crop/142x142/" alt=""></li>

              </ul>
              <p class="quan">全麦蔓越莓核桃面包</p>
            </div>
          </div>
        </div>

        <div class="k"></div>
      </swiper-slide>
      <swiper-slide class="dianpu">
        <section data-v-517cbc2a="" class="section">
          <h3 class="section-title">配送信息</h3>
          <div class="delivery-36amC_0">
            <div>
              <span class="delivery-2YA1c_0">蜂鸟专送</span>
              <span>约20分钟送达，距离1.1km</span>
            </div>
            <!---->
            <div class="song">配送费￥6</div>
          </div>
        </section>
        <section data-v-517cbc2a="" class="section">
          <h3 class="section-title">活动与服务</h3>
          <div class="activity-2iOA8_0">
            <div class="activity-1hPHa_0 activity-25cwN_0">
              <span class="activity-N5WvH_0" style="background-color: rgb(112, 188, 70);">首</span>
              <span class="activity-3dUjU_0">新用户下单立减17元(不与其它活动同享)</span>
            </div>
            <div class="activity-1hPHa_0 activity-25cwN_0">
              <span class="activity-N5WvH_0" style="background-color: rgb(240, 115, 115);">折</span>
              <span class="activity-3dUjU_0">5折下午茶，惬意一下</span>
            </div>
            <div class="activity-1hPHa_0 activity-25cwN_0">
              <span class="activity-N5WvH_0" style="border: 1px solid rgb(153, 153, 153); color: rgb(153, 153, 153);">保</span>
              <span class="activity-3dUjU_0">已加入“外卖保”计划，食品安全有保障</span>
            </div>
            <div class="activity-1hPHa_0 activity-25cwN_0">
              <span class="activity-N5WvH_0" style="border: 1px solid rgb(153, 153, 153); color: rgb(153, 153, 153);">票</span>
              <span class="activity-3dUjU_0">该商家支持开发票，请在下单时填写好发票抬头</span>
            </div>
          </div>
        </section>
        <section data-v-517cbc2a="" class="section album-1cjk__0">
          <h3 class="section-title">商家实景</h3>
          <div class="album-1pGkG_0">
            <a href="javascript:"><img src="https://fuss10.elemecdn.com/1/f5/ca423c20e0ef2528ac8271a5c9a15jpeg.jpeg?imageMogr/format/webp/thumbnail/!200x200r/gravity/Center/crop/200x200/">
              <!-- <span class="album-2vPHW_0">门面(1张)</span> -->
            </a>
            <a href="javascript:"><img src="https://fuss10.elemecdn.com/4/90/e6b0334faeba289a0577b002de5b3jpeg.jpeg?imageMogr/format/webp/thumbnail/!200x200r/gravity/Center/crop/200x200/">
              <!-- <span class="album-2vPHW_0">大堂(1张)</span> -->
            </a>
          </div>
        </section>
        <div data-v-517cbc2a="">
          <section class="section">
            <h3 class="section-title">商家信息</h3>
            <ul class="detail-1_W84_0">
              <li>新店入驻</li>
              <!---->
              <li>
                <span>商家电话</span>
                <span>
                  <span>010-65246690</span>

                </span>
              </li>
              <li>
                <span>地址</span>
                <span>北京市崇文区崇文门西大街4号楼裙房</span>
              </li>
              <li>
                <span>营业时间</span>
                <span>10:00-18:30</span>
              </li>
            </ul>
          </section>
          <section class="section_">
            <a href="https://h5.ele.me/shop/certification/#/?restaurant_id=4332120435556513&amp;realId=360213" class="section-title detail-1wFyo_0">营业资质

            </a>>
          </section>
        </div>

      </swiper-slide>
    </swiper>
    <footer class="ftr">
      <div class="ftr-top">
        满50减12
      </div>
      <div class="ftr-wei">
        <div class="wei-left">
          <div class="wei-he">
            <div class="hyu">
              <p class="iconfont icon-gouwuche"></p>
            </div>
          </div>
          <div class="wei-tyy">
            <p>￥0</p>
            <span>配送费：￥5</span>
          </div>
        </div>
        <div class="wei-right">
          <p>￥40起送</p>
        </div>
      </div>
    </footer>

  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["商品", "评价", "店铺"],
      list1: ["热销", "优惠", "超实惠套餐", "商务套餐", "饮料主食", "招牌套餐", "冬季砂锅", "促销"],
      swiperOption: {
        // slidesPerView: 3,
        // spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    click(e) {
      var lis = document.querySelectorAll("li");
      console.log(lis);
      for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      this.swiper.slideTo(e, 1000, false);
      lis[e].className = "li";
    }
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.nav {
  width: 100%;
  .px2rem(height,70);
  display: flex;
  justify-content: space-between;
  background: #cccccc;
  span {
    width: 80%;
  }
  img {
    width: 10%;
    background: #cccccc;
  }
}
.nav1 {
  .px2rem(height,250);
  width: 100%;
  display: flex;
  background: #cccccc;
  .left {
    width: 30%;
    .px2rem(height,180);
    img {
      width: 65%;
      padding: 10% 15%;
    }
  }
  .right {
    width: 70%;
    .px2rem(height,180);
    margin: 3% 0%;
    h2 {
      .px2rem(height,40);
      width: 100%;
      .px2rem(font-size,36);
      font-weight: bolder;
    }
    p {
      width: 100%;
      .px2rem(height,30);
      .px2rem(margin-top,20);
      .px2rem(font-size,20);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        width: 30%;
        .px2rem(height,30);
        .px2rem(margin-left,2%);
      }
      .gong {
        color: red;
      }
    }
  }
}
.bom {
  width: 100%;
  .px2rem(height,40);
  .px2rem(line-height,40);
  display: flex;
  justify-content: space-between;
  background: #cccccc;
  .px2rem(font-size,25);
  .left {
    .px2rem(padding-left,30);
    span {
      background: red;
    }
  }
  .right {
    .px2rem(padding-right,30);
    span {
      .px2rem(font-size,20);
      .px2rem(padding-left,10);
      font-weight: bolder;
    }
  }
}

.ul {
  .px2rem(height,100);
  width: 100%;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 9;
  background: #ffffff;
  // justify-content: space-between;
  align-items: center;
  li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .li {
    border-bottom: 4px solid red;
    color: black;
  }
}
.wp {
  width: 100%;
  .px2rem(height,1088);
  overflow: auto;
  //   margin-bottom: 80px;
  .swp1 {
    width: 100%;
    .xia11 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      ul {
        width: 20%;
        .px2rem(height,800);
        overflow: auto;
        li {
          width: 100%;
          .px2rem(height,100);
          .px2rem(line-height,100);
          border: 1px solid #cccccc;
          box-sizing: border-box;
          text-align: center;
        }
        .li {
          border-bottom: 4px solid red;
          color: black;
        }
      }
      .box {
        width: 80%;
        .px2rem(height,800);
        overflow: auto;
        .ox {
          width: 100%;
          .p1 {
            width: 100%;
            .px2rem(height,30);
            .px2rem(line-height,30);
            border-bottom: 1px #cccccc dashed;
            .cu {
              font-weight: bolder;
              .px2rem(padding-left,  20);
              .px2rem(padding-right,  10);
            }
          }
          .box2 {
            width: 100%;
            display: flex;
            .left {
              width: 30%;
              img {
                // .px2rem(width,120);
                // .px2rem(height,120);
                width: 80%;
                .px2rem(padding,25);
              }
            }
            .chao {
              // .px2rem(padding,5%);
              width: 100%;
              .px2rem(line-height,40);
              h2 {
                //  .px2rem(padding-top,20%);
                padding-top: 4.2%;
                font-weight: bolder;
                .px2rem(font-size,24);
              }
              p {
                .px2rem(height,30);
                .px2rem(line-height,30);
                // white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                // .px2rem(padding-top,2%);
              }
              .qian {
                color: red;
                font-weight: bolder;
                .px2rem(font-size,30);
                display: flex;
                justify-content: space-between;
                span {
                  .px2rem(padding-right,20);
                  color: black;
                }
              }
            }
          }
        }
      }
    }
  }
}

.pj {
  width: 100%;
  .px2rem(height,150);
  background: #ffffff;

  .pj1 {
    width: 90%;
    .px2rem(height,150);
    margin: 10px auto;
    display: flex;
    .left {
      width: 40%;
      .px2rem(height,150);
      text-align: center;
      border-right: 1px solid #cccccc;
      .da {
        color: red;
        .px2rem(font-size,40);
        font-weight: bolder;
        .px2rem(padding-top,10);
      }
      .da1 {
        .px2rem(font-size,28);
        .px2rem(padding-top,10);
      }
      .da2 {
        .px2rem(padding-top,10);
        .px2rem(font-size,20);
      }
    }
    .right {
      width: 60%;
      .px2rem(height,150);
      .px2rem(padding-left,30);
      .r1 {
        .px2rem(font-size,28);
        .px2rem(padding-top,20);
        span {
          .px2rem(padding-left,30);
          .px2rem(font-size,20);
          color: red;
        }
        .shi {
          color: #cccccc;
        }
      }
    }
  }
}
.hao {
  .px2rem(height,20);
  width: 100%;
  background: #666666;
  .px2rem(margin-top, 20);
}
.xia {
  .px2rem(height,120);
  width: 100%;
  .xia1 {
    width: 80%;
    .px2rem(height,120);
    margin: 0 auto;
    border-bottom: 1px solid #cccccc;
    display: flex;
    align-items: center;

    p {
      .px2rem(padding,10);
      .px2rem(margin-left, 20);
    }
    p:nth-child(1) {
      background: blue;
    }
    p:nth-child(2) {
      background: rgb(119, 0, 255);
    }
    p:nth-child(3) {
      background: rgb(148, 139, 158);
    }
    p:nth-child(4) {
      background: rgb(119, 0, 255);
    }
  }
}
.ren {
  width: 100%;
  .px2rem(height,300);
  border-bottom: 1px solid #cccccc;
  display: flex;
  .tou {
    width: 20%;
    .px2rem(height,300);
    p {
      width: 65%;
      height: 40%;
      text-align: center;
      .px2rem(font-size, 100);
      .px2rem(margin-top,20);
      color: #ffffff;
      background: blue;
      border-radius: 100%;
    }
  }
  .zi {
    width: 80%;
    .px2rem(height,300);
    ul {
      li {
        .px2rem(padding,10);
        img {
          width: 20%;
        }
      }
    }
    .quan {
      z-index: 9;
      .px2rem(width,200);
      .px2rem(height,40);
      .px2rem(line-height,40);
      border: 1px solid #cccccc;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.k {
  .px2rem(height,200);
  width: 100%;
}
.max {
  width: 100%;
  .px2rem(height,600);
  overflow: auto;
}
.dianpu {
  width: 100%;
  .px2rem(height,900);
  overflow: auto;
  background: #cccccc;
  .section_ {
    .px2rem(margin,30);
    .px2rem(height,10);
    a {
      .px2rem(margin,30);
      .px2rem(height,10);
    }
  }
  .section {
    width: 100%;
    background: #fff;
    // .px2rem(height,200);
    .px2rem(padding-left,20);
    h3,
    a {
      .px2rem(padding,20);
      .px2rem(font-size,30);
      font-weight: bolder;
    }

    .section-title {
      .px2rem(margin-top,30);
    }
    ul {
      li {
        .px2rem(margin,20);
      }
    }
    .detail-1_W84_0 {
      li {
        .px2rem(padding,10);
      }
    }
    .delivery-36amC_0 {
      div {
        .px2rem(margin,20);
        .delivery-2YA1c_0 {
          width: 30%;
          .px2rem(height,40);
          .px2rem(line-height,40);
          background: blue;
        }
        span {
          .px2rem(margin,10);
        }
      }
      .song {
        .px2rem(margin-left,30);
      }
    }
    .activity-1hPHa_0 {
      .px2rem(padding-top,20);
    }
    .album-1pGkG_0 {
      img {
        width: 30%;
      }
    }
  }
}
.ftr {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 300;
  .ftr-top {
    width: 100%;
    .px2rem(height,60);
    background: #ffcc99;
    display: flex;
    justify-content: center;
    align-items: center;
    .px2rem(font-size,32);
  }
  .ftr-wei {
    width: 100%;
    display: flex;
    .wei-left {
      width: 70%;
      .px2rem(height,140);
      background: #000;
      .wei-he {
        width: 35%;
        .px2rem(height,140);
        justify-content: center;
        display: flex;
        position: relative;
        top: 0;
        .hyu {
          .px2rem(width,120);
          .px2rem(height,120);
          border: 8px solid #161823;
          border-radius: 50%;
          background: #000000;
          justify-content: center;
          align-items: center;
          display: flex;
          position: absolute;
          top: -21px;
          p {
            .px2rem(font-size,80);
            color: #666666;
          }
        }
      }
      .wei-tyy {
        width: 65%;
        .px2rem(height,140);
        display: flex;
        flex-direction: column;
        position: relative;
        .px2rem(top,-140);
        left: 35%;
        p {
          .px2rem(font-size,42);
          font-weight: bold;
          color: #fff;
          .px2rem(padding-top,35);
        }
        span {
          .px2rem(font-size,32);
          color: #fff;
          .px2rem(padding-top,12);
        }
      }
    }
    .wei-right {
      width: 30%;
      .px2rem(height,140);
      display: flex;
      justify-content: center;
      align-items: center;
      background: #161823;
      p {
        .px2rem(font-size,42);
        font-weight: bold;
        color: #fff;
      }
    }
  }
}
</style>
